import { useBusinessList } from '../../hook/businessList';
import { Form, Select, Button, Icon, Radio, Card } from "antd";
import { loadList } from "./cgi";
import * as React from 'react';
import ChartWrap from "./chart-warpper";
import { setLastSelect } from '../../common/utils';
import './index.less';

interface ProjectInfo {
    id: number,
    loginName: string,
    chineseName: string,
    role: number,
    name: string
}

const { useState, useEffect, useMemo } = React;
interface homeErrorProps {
    loading: boolean,
    projectList: ProjectInfo[]
}

/**
 * 页面 Container
 */
export default function HomeErrorCharts(props: homeErrorProps) {
    const projectList = props.projectList;
    const [projectId, setProjectId] = useState(parseInt(localStorage.getItem('last_select')) || -1);
    // CGI 返回结果: 错误次数统计情况
    const [items, setItems] = useState([]);
    const [timeScope, setTimeScope] = useState('1');
    const loadItems = () => {
        if (projectList.length === 0) {
            return;
        }
        let queryIds = [projectId]
        if (projectId === -1) {
            queryIds = projectList.map(item => item.id);
        }
        loadList(queryIds, timeScope, projectList)
            .then(items => {
                setItems(items);
            });
    }

    useEffect(() => {
        loadItems();
    }, [projectId, timeScope, projectList]);
    return (
        <div>
            <h3>错误量统计(次)</h3>
            <Card
                className="chart-backgounrd"
                hoverable
                loading={props.loading}
            >
                <Form style={{
                    display: 'flex',
                    paddingLeft: 30
                }}>
                    {/* Form: projectId */}
                    <Form.Item>
                        <Select showSearch value={projectId} onSelect={id => { setProjectId(id); id > 0 ? setLastSelect(id.toString()) : null; }} style={{ width: 260, marginRight: 30 }}
                            filterOption={(input, option: any) =>
                                option.props.title.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }>
                            <Select.Option key="charts-quanbu-xiangmu" value={-1} title="全部">
                                全部项目
                            </Select.Option>
                            {
                                projectList.map((item) => {
                                    return (
                                        <Select.Option key={item.id.toString()} value={item.id} title={item.name}>
                                            {item.id}.{item.name}
                                        </Select.Option>
                                    )
                                })
                            }
                        </Select>
                    </Form.Item>

                    {/* Form: timeScope */}
                    <Form.Item style={{ marginRight: 30 }}>
                        <Radio.Group value={timeScope} onChange={e => { setTimeScope(() => e.target.value.toString()); }}>
                            <Radio.Button key="sevenday" value={'1'}>
                                最近七天
                        </Radio.Button>
                            <Radio.Button key="month" value={'2'}>
                                最近一个月
                        </Radio.Button>
                        </Radio.Group>
                    </Form.Item>
                    {projectId === -1 ? <p className="chart-tips">若项目昨日PV小于200，或者错误量小于10时，则不会显示在全部项目的图表中！</p> : null}
                </Form>
                {useMemo(() => <ChartWrap items={items} list={projectList} selectId={projectId} />, [items, projectList])}
            </Card>
        </div>
    );
}

